<template>
	<view class="">
		<view class="container">
			<!-- 客户信息 -->
			<view class="customer-info">
				<view class=" customer-info-title flex-align">
					<view class="line"></view>
					<view class="info-title-text">客户信息</view>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">客户姓名</text>
					<text class="info-item-val">{{detail.borrowerName}}</text>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">客户电话</text>
					<text class="info-item-val">{{detail.borrowerPhone}}</text>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">客户地址</text>
					<text class="info-item-val">{{detail.borrowerAddress}}</text>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">订单号</text>
					<text class="info-item-val">{{detail.orderNum}}</text>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">指派人员</text>
					<text class="info-item-val">{{detail.appointName}}</text>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">指派时间</text>
					<text class="info-item-val">{{detail.appointTime}}</text>
				</view>
			</view>
			<!-- 下户信息 -->
			<view>
				<view class=" customer-info-title flex-align">
					<view class="line"></view>
					<view class="info-title-text">下户信息</view>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">调查时间</text>
					<picker mode="date" :value="makeTime" @change="bindDateChange">
						<view class="picker">
							<text class="info-item-val time-text">{{makeTime?makeTime:'请输入调查时间'}}</text>
						</view>
					</picker>

				</view>
			</view>
			<!-- 按钮 -->
			<view class="btn-box flex-space">
				<view class="btn-itme" @click="requestInvestigation">申请调查</view>
				<view class="btn-itme cancel" @click="onChangeLayer">取消调查</view>
			</view>
		</view>

		<!-- 取消调查弹层 -->
		<view class="mask" v-if="show" @click="onChangeLayer">
			<view class="layer-content" @click.stop="true">
				<view class="close-box flex-align">
					<image src="/images/index/xx-icon.png" @click="onChangeLayer" class="xx-icon"></image>
					<view class="cancel-why">取消原因</view>
				</view>
				<form @submit.stop="formSubmit">
					<!-- 输入框 -->
					<textarea name="note" id="textarea" placeholder="请输入取消原因" cols="30" rows="10"></textarea>
					<!-- 按钮 -->
					<button form-type="submit" class="btn">提交</button>
				</form>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detail: {},
				show: false, //取消调查弹层
				makeTime: '', //选择的时间
			}
		},
		onLoad: function(options) {
			this.id = options.id;
			console.log(this.id)
			if (this.id) {
				this.getData();
			}
		},
		methods: {
			//申请调查
			requestInvestigation() {
				if (!this.makeTime) {
					uni.showToast({
						icon: 'none',
						title: '请选择时间',
					})
					return;
				}
				this.$api.surveyMake({
					"id": this.id,
					"makeTime": this.makeTime,
				}).then(() => {
					uni.showToast({
						title: '申请成功',
					})
					uni.navigateBack({
						delta: 1,
					})
				})
			},
			//选择时间
			bindDateChange(e) {
				this.makeTime = e.detail.value
			},
			//提交取消原因
			formSubmit(e) {
				let value = e.detail.value.note;
				if (!value) {
					uni.showToast({
						icon: 'none',
						title: '请输入取消原因',
					})
					return;
				}
				this.$api.returned({
					"id": this.id,
					"note": value
				}).then(res => {
					uni.showToast({
						title: '提交成功',
					})
					uni.navigateBack({
						delta: 1,
					})
				})
			},
			//取消调查
			onChangeLayer() {
				this.show = !this.show;
			},

			//获取详情
			getData() {
				this.$api.getAppInfo(this.id).then(res => {
					this.detail = res.data.data;
				})
			},

		},
	}
</script>

<style scoped>
	page {
		background-color: #fff;
	}

	.container {
		padding: 40rpx 30rpx;
	}

	.customer-info {
		margin-bottom: 42rpx;
	}

	.customer-info-title {
		margin-bottom: 20rpx;
	}

	.line {
		width: 8rpx;
		height: 28rpx;
		background: #585CF7;
		border-radius: 4rpx;
		margin-right: 13rpx;
	}

	.info-title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.info-item {
		height: 110rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.info-item-text {
		font-size: 30rpx;
		color: #333333;
	}

	.info-item-val {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.btn-box {
		margin-top: 90rpx;
	}

	.btn-itme {
		width: 330rpx;
		height: 80rpx;
		background: #585CF7;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.cancel {
		background: #EEEEFE;
		border: 2rpx solid #585CF7;
		color: #585CF7;
	}

	/* 取消调查弹层 */
	.mask {
		touch-action: auto;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
	}

	.layer-content {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 670rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 60rpx 30rpx 0;
	}

	.close-box {
		margin-bottom: 60rpx;
	}

	.xx-icon {
		width: 28rpx;
		height: 28rpx;
	}

	.cancel-why {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	#textarea {
		width: 100%;
		height: 300rpx;
		background: #F8F8F8;
		border-radius: 15rpx;
		padding: 34rpx 40rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		margin-bottom: 54rpx;
	}

	.btn {
		width: 100%;
		height: 98rpx;
		background: #585CF7;
		border-radius: 49rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 98rpx;
	}

	.time-text {
		font-size: 30rpx;
		color: #999999;
		font-weight: normal;
	}
</style>
